<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 1、属性选择器 伪类选择器 */
        /* 选择所有带有 title 属性的元素 */
    [title] {
  color: blue;
}

/* 选择 title 属性值为 "example" 的元素 */
    [title="example"] {
  font-weight: bold;
}

button{
    background-color: aqua;

}
button:focus{
  background-color: lightgray;
}

.a{
    /* box-shadow: 10px 5px 5px black; */
    background-color: antiquewhite;
    /* border-radius:5px; */
    height: 400px;
    width: 400px;
    background-clip: content-box;
}

.box {
    width: 50px;
    height: 50px;
    background-color: pink;
    /* transition-property: all;用于指定使用过渡效果的css属性 例如：width */
    /* transition-duration: 0.8s; */
    /* transition: linear all 1s; */
  }
  .box:hover {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: skyblue;
    transition: linear all 1s;

  }
  .box:active{/*长按*/
    width: 100px;
    height: 100px;
    background-color: aqua;
    transition: ease-out width 0.5s;

  }
  .ele{
    transform: rotate(45deg) ;/*scale(1.5) translate(200px, 100px)*/
    width: 100px;
    height: 100px;
    background-color: blue;
    transform-origin:50% 50%;
}

  

    </style>
</head>
<body>
        <!-- 1、属性选择器 伪类选择器 -->
   <div title="k">哈哈</div>
   <div title="example">example</div>

   <button>按钮</button>

   <!-- 2、box-shadow 阴影 -->
    <div class="a">嘿嘿</div>

    <!-- 3、transition -->
    <div class="box"></div>

    <!-- 4、transform -->
    <div class="ele"></div>

</body>
</html>